<template>
  <b-col cols="12" lg="6" class="mb-3">
    <div class="my-card py-3">
      <b-row class="mx-1" >
        <b-col cols="12"  @click="$emit('click')">
          <b-row class="">
            <b-col cols="6">
              <p class="m-0">
                <b-avatar
                    :variant="item.sellervariant"
                    :src="item.selleravatarsrc"
                    size="35px"
                    :to="'/user/'+item.selleruuid"
                    v-b-popover.hover.top="'点击查看个人信息'"
                ></b-avatar>
                <span class="ml-2 ">{{item.sellernick}}</span>
              </p>
            </b-col>
            <b-col cols="6" class="text-right my-auto " :class="statusclass">
              <span class="text-dark">状态：</span> {{statusmsg}}
            </b-col>
          </b-row>
          <b-row class="mt-2">
            <b-col cols="4">
              <b-img :src="item.imgsrc" rounded fluid/>
            </b-col>
            <b-col cols="8" class="pl-0">
              <h5>{{item.title}}</h5>
              <p>
                {{item.desc}}
              </p>
            </b-col>
          </b-row>
          <b-row>
            <b-col class="mt-2">
              <span class="price color-number">￥{{item.price}} </span>
            </b-col>
            <b-col cols="8" class="text-right mt-1">
              <b-button variant="primary" class="mr-1 px-1" @click.stop="$emit('publish')" v-if="item.status===0">发布</b-button>
              <b-button variant="warning" class="mr-1 px-1" @click.stop="$emit('dispublish')" v-if="item.status ===1">取消发布</b-button>
              <b-button variant="info" class="mr-1 px-1"  @click.stop="$emit('update')" v-if="item.status<=1">修改</b-button>
              <b-button variant="info" class="mr-1 px-1" disabled v-else>修改</b-button>
              <b-button variant="danger" class="px-1" @click.stop="$emit('delete')" v-if="item.status<=1">删除</b-button>
              <b-button variant="danger" class="px-1" disabled v-else>删除</b-button>


            </b-col>
          </b-row>
        </b-col>
      </b-row>
    </div>
  </b-col>
</template>

<script>
  export default {
    name: "TransactionItem",
    props: ['item'],
    data(){
      return{
        //状态   0 草稿   1 发布    2 已下单  3已发货  4 交易完成  5 异常锁定
        statusmap:[
          {class:'text-info',msg:'草稿'},
          {class:'text-primary',msg:'已发布'},
          {class:'text-warning',msg:'已下单'},
          {class:'text-warning',msg:'已发货'},
          {class:'text-success',msg:'交易完成'},
          {class:'text-danger',msg:'异常锁定'},
        ]

      }
    },
    computed:{
      statusclass(){
        return this.statusmap[this.item.status].class
      },
      statusmsg(){
        return this.statusmap[this.item.status].msg
      }
    }
  }
</script>

<style scoped>
  .my-card {
    background: #ffffff;
    border-radius: 5px;
    box-shadow: #6e6e6e 1px 1px 5px;
  }
  .price{
    font-size: 1.3em;
    font-weight: bold;
  }

</style>